<template>
    <div>
        <h6>home页面 - 存储功能详细演示</h6>
        <div class="result">
            <h4>操作结果和说明：</h4>
            <pre>{{ result }}</pre>
        </div>
        <!-- Cookie操作演示 -->
        <div class="section">
            <h3>Cookie操作演示</h3>
            <p><strong>特性说明：</strong>一次只能设置一个键值对，服务端可访问，每次请求自动发送</p>
            <el-button @click="setSimpleCookie">设置简单Cookie（会话级别）</el-button>
            <el-button @click="setObjectCookie">设置对象Cookie（30天过期）</el-button>
            <el-button @click="setSecureCookie">设置安全Cookie（带参数）</el-button>
            <el-button @click="getCookieDemo">读取所有Cookie</el-button>
            <el-button @click="removeCookieDemo">删除Cookie</el-button>
            <el-button @click="testMultipleCookies">测试多个Cookie设置</el-button>
            <el-button @click="testCookieParameters">测试Cookie参数</el-button>
        </div>

        <!-- LocalStorage操作演示 -->
        <div class="section">
            <h3>LocalStorage操作演示</h3>
            <p><strong>特性说明：</strong>客户端持久存储，5-10MB大小，同域名共享</p>
            <el-button @click="saveUserPref">保存用户偏好到LocalStorage</el-button>
            <el-button @click="getLocalStorage">读取LocalStorage</el-button>
            <el-button @click="removeUserPref">清除用户偏好</el-button>
        </div>
        <!-- SessionStorage操作演示 -->
        <div class="section">
            <h3>SessionStorage操作演示</h3>
            <p><strong>特性说明：</strong>标签页级别存储，关闭标签页清除,其他方法跟local一样</p>
            <el-button @click="saveUserSession">保存用户偏好到sessionStorage</el-button>
            <el-button @click="getSessionStorage">读取sessionStorage</el-button>
            <el-button @click="removeUserSeesion">清除用户偏好</el-button>
        </div>
    </div>
</template>

<script>
import Storage from '@/utils/storage'
export default {
    name: 'Home',
    data() {
        return {
            result: '点击按钮开始演示...',
            form: {
                name: 'zhangsan',
                sex: 'male',
                age: 20
            }
        }
    },
    mounted() {
        this.log('页面加载完成，开始读取存储数据...',window.location.protocol,window.location.protocol === 'https:');
        // 读取各种存储的数据
        const theme = Storage.getLocal('theme');
        const obj = Storage.getLocal('obj');
        const formData = Storage.getSession('formData');
        const userCookie = Storage.getCookie('user_info', true); // 自动解析JSON
        const authToken = Storage.getCookie('auth_token');
        const scopCookie = Storage.getCookie('scop_cookie');

        this.log(`读取结果：- LocalStorage主题: ${theme}- LocalStorage对象: ${JSON.stringify(obj)}
- SessionStorage表单: ${JSON.stringify(formData)}
- Cookie用户信息: ${JSON.stringify(userCookie)}
- 认证Token: ${scopCookie}`);
    },
    methods: {
        log(message) {
            this.result = message;
            console.log(message);
        },
        // Cookie操作示例
        setSimpleCookie() {
            // 简单Cookie - 会话级别（不设置过期时间，则浏览器关闭删除,而不是标签关闭）
            Storage.setCookie('username', '张三');
            document.cookie = "username1=张三1;";
            // 错误方式 - 这样只会设置前面的username1=张三1，即只能一个个加，删除也是一个个删除

            document.cookie = "username2=张三; theme2=dark"; // 无效，只会设置最后一个
            const expires = " + new Date(Date.now() + 30 * 86400000).toUTCString() + ";//持久cookie：30天过期,不设置则相当于会话保存，关闭浏览器就失效
            document.cookie = "username3=张三3; expires=" + expires + ";";
            // 安全cookie（仅HTTPS，防XSS和CSRF）
            document.cookie = "auth_token=xyz789; max-age=3600; path=/; secure; httponly; samesite=strict";
            // 子域名共享cookie
            document.cookie = "company_id=123; domain=.example.com; path=/; max-age=2592000";
            this.log('设置简单Cookie: username=张三 (会话cookie，浏览器关闭即删除)');
            this.log('说明：不设置expires参数即为会话cookie');
            // 参数	说明	示例	应用场景
            // expires	过期时间	expires=Thu, 18 Dec 2025 12:00:00 UTC	可选，不设置则为会话cookie（浏览器关闭时删除）
            // max-age（秒）	最大存活秒数	max-age=2592000 （30天）	替代expires的现代方式，max-age=0 立即删除？max-age的优先级比expires高
            // path	路径限制	path=/admin	限制cookie在特定路径下有效
            // domain	域名限制（不指定domain默认当前域名）	domain=.example.com	子域名共享cookie（加了点就是子域名，和当前域名共享cookie）
            //domain 精确域名domain=api.example.com;的时候子域名无效，子域名只能是.example.com，只能设置小的域名
            // secure	仅HTTPS	secure	安全传输，防止中间人攻击
            // httponly	防JS访问	httponly	防止XSS攻击，服务端专用，js（前端）不能访问/修改，所以安全
            // samesite	同站策略	samesite=strict	CSRF防护
            // 删除cookie:置空且设置过期时间；只有这个方法
            // document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

            // domain	控制Cookie有效的域名	domain=.example.com	当前域名	不能设置更高级域名
            // max-age	相对过期时间（秒）	max-age=3600	会话级别	现代推荐方式
            // expires	绝对过期时间	expires=UTC时间	会话级别	时区敏感
            // path	有效的URL路径	path=/admin	当前url路径	路径匹配时携带
            // secure	仅HTTPS传输	secure	false	本地HTTP环境无效
            // httpOnly	防JS访问	服务端设置	false	客户端无法设置
            // sameSite	同站策略	samesite=strict	lax	防CSRF攻击
        },
        setObjectCookie() {
            const userInfo = {
                id: 123,
                name: '李四',
                preferences: {
                    theme: 'light',
                    notifications: true,
                    language: 'zh-CN'
                }
            };
            //保存序列化对象
            document.cookie = `user_data=${encodeURIComponent(JSON.stringify(userInfo))}; max-age=2592000; path=/`;
            Storage.setCookie('user_info', userInfo, 30, { path: '/' });
            this.log('设置对象Cookie: user_info (30天过期) - ' + JSON.stringify(userInfo));
            this.log('说明：对象需要JSON.stringify()转换为字符串存储，读取时自动解析');
            // 读取序列化对象
            const cookieValue = document.cookie.split('; ').find(row => row.startsWith('user_data='));
            if (cookieValue) {
                const userData = JSON.parse(decodeURIComponent(cookieValue.split('=')[1]));
                console.log(userData); // {name: "张三", age: 25, preferences: {...}}
            }
            // // 保存：Base64编码
            // const userStr = btoa(JSON.stringify(user));
            // document.cookie = `user_data=${userStr}; max-age=2592000; path=/`;
            // // 读取：Base64编码
            // const cookieValue = document.cookie.split('; ').find(row => row.startsWith('user_data='));
            // if (cookieValue) {
            //     const userData = JSON.parse(atob(cookieValue.split('=')[1]));
            // }
        },

        setSecureCookie() {
            // 安全Cookie示例（实际项目中需要HTTPS）
            Storage.setCookie('session_id', 'abc123xyz', 1, {
                path: '/',
                secure: false, // 实际项目设为true（需要HTTPS）
                samesite: 'strict'
            });
            this.log('设置安全Cookie: session_id (1天过期，SameSite严格模式)');
            this.log('Cookie参数说明：');
            this.log('- path=/: 在整个网站有效');
            this.log('- secure: 仅HTTPS传输（当前为false演示）');
            this.log('- samesite=strict: 防止CSRF攻击');
        },

        getCookieDemo() {
            const username = Storage.getCookie('username');
            const userInfo = Storage.getCookie('user_info', true); // 自动解析JSON
            const sessionId = Storage.getCookie('session_id');
            this.log(`读取所有Cookie：
- username: ${username}
- user_info: ${JSON.stringify(userInfo)}
- session_id: ${sessionId}`);
            this.log('说明：getCookie()第二个参数设为true可自动解析JSON对象');
        },

        removeCookieDemo() {
            Storage.removeCookie('username');
            this.log('删除Cookie: username');
            this.log('删除原理：设置过期时间为1970年1月1日');
        },

        testMultipleCookies() {
            this.log('=== 测试多个Cookie设置 ===');

            // 分别设置多个cookie
            Storage.setCookie('cookie1', 'value1', 7);
            Storage.setCookie('cookie2', 'value2', 7);
            Storage.setCookie('cookie3', 'value3', 7);

            this.log('分别设置了3个cookie：cookie1, cookie2, cookie3');
            this.log('document.cookie当前内容：' + document.cookie);
            this.log('结论：每次document.cookie = "..."只设置一个cookie，不会影响其他cookie');
        },

        // LocalStorage操作
        saveUserPref() {
            Storage.setLocal('theme', 'dark');
            Storage.setLocal('language', 'zh-CN');
            Storage.setLocal('form', this.form);
            const data = { numbers: [1, 2, 3], flag: true, text: "hello" };
            this.log(data.toString());
            this.log(JSON.stringify(data));
            //JSON.stringify保存字符串能正确的恢复原来的数据！！！
            localStorage.setItem('data', JSON.stringify(data));
        },
        getLocalStorage() {
            const theme = Storage.getLocal('theme');
            const form = Storage.getLocal('form');
            const data = Storage.getLocal('data');
            this.log(`读取LocalStorage：- 主题: ${theme}- 表单: ${form}`)
            // this.log(form, data);
        },
        removeUserPref() {
            Storage.removeLocal('theme');
            Storage.removeLocal('form');
            localStorage.clear();
            this.log('清空LocalStorage中的用户偏好数据');
        },
        //sessionStorage操作
        saveUserSession() {
            Storage.setSession('sessiontheme', 'dark');
            Storage.setSession('sessionform', this.form);
        },
        getSessionStorage() {
            const sessiontheme = Storage.getSession('sessiontheme');
            const sessionform = Storage.getSession('sessionform');
            this.log(`读取SessionStorage：- 主题: ${sessiontheme}- 表单: ${sessionform}`)
        },
        removeUserSeesion() {
            Storage.removeSession('sessiontheme');
            Storage.removeSession('sessionform');
        },
        // 认证token使用Cookie（服务端需要）
        setAuthToken(token) {
            Storage.setCookie('auth_token', token, 30, {
                path: '/',
                secure: false, // 实际项目设为true
                httponly: false // 实际项目设为true（需要服务端设置）
            });
        },
        // 在Home.vue的methods中添加测试方法
        testCookieParameters() {
            this.log('=== Cookie参数详细测试 ===');

            // 1. domain参数测试
            this.log('\n1. domain参数测试:');

            // 当前域名cookie
            document.cookie = "current_domain_cookie=value1; path=/";
            this.log('- 当前域名cookie: 只在当前域名有效');

            // 注意：在本地开发环境无法测试跨子域名，但原理如下：
            this.log('- 设置domain=.example.com: 所有子域名共享');
            this.log('- 设置domain=api.example.com: 仅api子域名有效');

            // 2. max-age参数测试
            this.log('\n2. max-age参数测试:');

            // 30秒后过期的cookie
            document.cookie = "short_lived_cookie=30秒后过期; max-age=30; path=/";
            this.log('- max-age=30: 30秒后自动过期');

            // 1小时后过期的cookie  
            document.cookie = "hour_cookie=1小时后过期; max-age=3600; path=/";
            this.log('- max-age=3600: 1小时后过期');

            // 3. path参数测试
            this.log('\n3. path参数测试:');

            // 全站有效的cookie
            document.cookie = "global_cookie=全站有效; path=/";
            this.log('- path=/: 所有路径都会携带此cookie');

            // 特定路径有效的cookie：注意hash模式下路径会被忽略，不会匹配。
            document.cookie = "scop_cookie=仅scop路径有效; path=/scop";
            this.log('- path=/scop: 只有访问/scop路径时才会携带');

            // 4. secure参数测试
            this.log('\n4. secure参数测试:');

            // 普通cookie（HTTP和HTTPS都携带）
            document.cookie = "normal_cookie=普通cookie; path=/";
            this.log('- 不设置secure: HTTP和HTTPS都会携带');

            // 安全cookie（仅HTTPS携带）
            document.cookie = "secure_cookie=安全cookie; secure; path=/";
            this.log('- 设置secure: 仅HTTPS连接时携带');
            this.log('  ※ 当前本地开发是HTTP，所以secure cookie可能不会设置成功');

            // 5. 综合示例
            this.log('\n5. 综合安全Cookie示例:');

            const secureCookieConfig = {
                name: 'auth_token',
                value: 'encrypted_token_123',
                maxAge: 86400, // 1天
                domain: '.example.com',
                path: '/',
                secure: true,
                httpOnly: false, // 注意：httpOnly只能服务端设置
                sameSite: 'strict'
            };

            this.log('生产环境安全Cookie配置:');
            this.log(`- 名称: ${secureCookieConfig.name}`);
            this.log(`- 有效期: ${secureCookieConfig.maxAge}秒 (1天)`);
            this.log(`- 域名: ${secureCookieConfig.domain} (所有子域名共享)`);
            this.log(`- 路径: ${secureCookieConfig.path} (全站有效)`);
            this.log(`- 安全传输: ${secureCookieConfig.secure} (仅HTTPS)`);
            this.log(`- 同站策略: ${secureCookieConfig.sameSite} (防CSRF)`);

            // 实际设置（在HTTPS环境下）
            if (window.location.protocol === 'https:') {
                document.cookie = `${secureCookieConfig.name}=${secureCookieConfig.value}; max-age=${secureCookieConfig.maxAge}; domain=${secureCookieConfig.domain}; path=${secureCookieConfig.path}; secure; samesite=${secureCookieConfig.sameSite}`;
            }
        },
    },
}
// SessionStorage：
// 新标签页会创建新的session，需重新登录
// 作用域限制：同源同标签页
// LocalStorage：
// 新标签页可共享数据，不需要重新登录
// 作用域：同源所有标签页
// Cookie：
// 根据设置（HttpOnly/Secure）决定是否自动携带
// 作用域：可设置domain/path控制范围
// 跨域影响：
// 所有存储都受同源策略限制
// 跨域系统无法共享任何存储
// 多系统同名token：

// 不会互相覆盖，因为作用域隔离
// 每个系统的存储都是独立的
</script>

<style scoped>
.section {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.section h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.section p {
    margin: 10px 0;
    color: #666;
    font-size: 14px;
}

.el-button {
    margin: 5px;
}

.result {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.result h4 {
    margin-top: 0;
    color: #495057;
}

.result pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #212529;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}
</style>